
var box=document.querySelector('.filtration')
var cinemas=[]
var cinemaView={
    getUrlList:async function () {
        // var self=this;
        // var url='http://huruqing.cn:3000/api/cinema/getList'
        // $.ajax({
        //     type: "get",
        //     url: url,
        //     dataType: "json",
        //     success: function (response) {
        //         // console.log(response)
        //         cinemas=response.cinemas
        //         self.renderUrlList(response.cinemas)
        //     }
        // });
        var cinema=await reques.get('cinema/getList')
        cinemas=cinema.cinemas
        this.renderUrlList(cinema.cinemas)
    },showClick(){/* 显示或隐藏地区事件 */
        if (box.className.includes('dsn')) {/* 判断class里面有没有包含dsn */
            box.className='filtration'
            document.querySelector('.qcColor').className='f14 qcColor qc'
        }else{
            box.className='filtration dsn'
            document.querySelector('.qcColor').className='f14 qcColor'
        }
    },
    checked:function () {
        if(event.target.localName=='span'){
            // document.querySelectorAll('.filtration li span').forEach(i=>{
            //     i.className=''/* 设置所有的span class属性为空 */
            // })
            document.querySelector('.liChecked .checked').className=''/* 取消未选中的颜色样式 */
            event.target.className='checked'/* 给选中的span元素设置颜色 */

            box.className='filtration dsn'/* 隐藏地区 */
            // console.log(event.target.innerHTML)
            var diqu=event.target.innerHTML;
            document.querySelector('.qcColor').innerHTML=`${diqu}<i class="iconfont icon-icon1"></i>`
            document.querySelector('.qcColor').className='f14 qcColor'

            var text=event.target.innerHTML/* 获取地区文本 */
            var newList=cinemas.filter(item =>{
                return item.areaName===text/* 返回跟item.areaName相等的地区信息 */
            })
            //  if (text=='全部') {
            //     this.renderUrlList(cinemas)/* 如果等于全部，把所有页面显示出来 */
            //  }else{
            //     this.renderUrlList(newList)/* 根据地区显示电影票 */
            //  }
             return text=='全部'?this.renderUrlList(cinemas):this.renderUrlList(newList)
        }  

    },
    renderUrlList(cinemas){/* 把数据渲染到页面上 */
        var str=''
        cinemas.forEach(item => {
            str+=`
            <div class="text-box fd-fr jc-sb ai-c">
                <p class="fd-c breadth">
                    <span class="mb-10 f16">${item.name}</span>
                    <span class="f14 f666 dizi">${item.address}</span>
                </p>
                <p class="fd-c fd-c ai-c">
                    <span class="mb-10 f12 ys">￥${item.lowPrice/100}起</span>
                    <span class="f14 f666">${item.Distance.toFixed(2)}</span>
                </p>
            </div>
            `
        });
        document.querySelector(".context").innerHTML=str
    }
}
cinemaView.getUrlList()